import React from "react";
import {Text, View, StyleSheet, TouchableOpacity} from "react-native";
import {scaleSize} from "@/utils/screenSize";
import { useRouter } from "expo-router";
import {Image} from "expo-image";
import {useDispatch} from "react-redux";
import { setOrderDetailByItem} from "@/store/slices/activityDetailSlice"

/*
* 0-未支付
* 1-已支付
* 2-已取消
* 3-退款中
* 4-已退款
* 5-已核销
*/


const OrderListComponent = function ({ data }) {
    const { item } = data;
    const router = useRouter();
    const dispatch = useDispatch();

    const goOrderDetail = () => {
        console.log('item', item);
        dispatch(setOrderDetailByItem({ orderDetailByItem: item }))
        router.push('/order/orderDetail')
    };

    const goTicket = function (id) {
        router.push(`/order/ticket/${id}`)
    };

    const goRefundOrder = function () {
        router.push("/order/refundOrder")
    };

    const goCancelOrder = function () {
        router.push("/order/cancelOrder")
    };


    return (
        <View>
            <View style={styles.orderItemContainer}>
                <View style={styles.orderBody}>
                    <TouchableOpacity style={{ flexDirection: "row" }} onPress={goOrderDetail}>
                        <View style={ styles.orderBanner}>
                            <Image source={{ uri: item?.imgUrl }} style={{ width: "100%", height: "100%" }} />
                        </View>
                        <View style={styles.orderContent}>
                            <View>
                                <Text
                                    numberOfLines={1}
                                    style={styles.orderTitle}
                                >
                                    { item.productName ? `${item.productName}-`: null }{ item?.ticketName }
                                </Text>
                            </View>
                            <View style={{ marginTop: 10 }}>
                                <Text style={styles.orderMoney}>
                                    ¥{ item?.price }
                                </Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                    {
                        item?.payStatus == 0 && (
                            <View style={{ marginLeft: 12, flex: 1 }}>
                                <Text style={{ color: "#EC6138", textAlign: "right" }}>已取消</Text>
                            </View>
                        )
                    }
                    {
                        item?.payStatus == 4 && (
                            <View style={{ marginLeft: 12, flex: 1 }}>
                                <Text style={{ color: "#EC6138", textAlign: "right" }}>退款成功</Text>
                            </View>
                        )
                    }
                </View>
                {
                    item?.payStatus == 0 && (
                        <View style={styles.orderFooter}>
                            <TouchableOpacity onPress={goCancelOrder}>
                                <View style={styles.canncelOrder}>
                                    <Text style={styles.canncelOrderText}>取消订单</Text>
                                </View>
                            </TouchableOpacity>
                            <View style={styles.OrderbtnTwo}>
                                <Text style={styles.OrderbtnTwoText}>去支付</Text>
                            </View>
                        </View>
                    )
                }
                {
                    item?.payStatus == 1 && (
                        <View style={styles.orderFooter}>
                            <TouchableOpacity onPress={goRefundOrder}>
                                <View style={styles.canncelOrder}>
                                    <Text style={styles.canncelOrderText}>申请退款</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => goTicket(item.orderNum)}>
                                <View style={styles.OrderbtnTwo}>
                                    <Text style={styles.OrderbtnTwoText}>展示凭证</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    )
                }
                {
                    item.payStatus == 5 && (
                        <View style={styles.orderFooter}>
                            <View style={styles.canncelOrder}>
                                <Text style={styles.canncelOrderText}>再次购买</Text>
                            </View>
                        </View>
                    )
                }

                {
                    item.payStatus == 3 && (
                        <View style={styles.orderFooter}>
                            <View style={styles.canncelOrder}>
                                <Text style={styles.canncelOrderText}>再次购买</Text>
                            </View>
                        </View>
                    )
                }

            </View>
        </View>
    )
};

const styles = StyleSheet.create({
    orderItemContainer: {
        marginTop: 10,
        marginLeft: 12,
        marginRight: 12,
        height: scaleSize(122),
        backgroundColor: "#fff",
        padding: 12,
        borderRadius: 8,
    },
    orderBody: {
        flexDirection: "row",
        borderBottomWidth: 1,
        borderBottomColor: "#F1F2F5",
        paddingBottom: 10,
    },
    orderContent: {
        marginLeft: 10,
    },
    orderBanner: {
        width: scaleSize(50),
        height: scaleSize(50),
        borderRadius: 4,
    },
    orderTitle: {
        width: 210,
        fontSize: 14,
        color: "#2A2B30",
    },
    orderMoney: {
        color: "#ED2A20",
        fontSize: 16,
    },
    orderFooter: {
        flexDirection: "row",
        justifyContent: "flex-end",
        alignItems: "center",
        marginTop: 12,
    },
    canncelOrder: {
        width: 72,
        height: 24,
        borderRadius: 12,
        borderWidth: 1,
        borderColor: "#C0C3CE",
        borderStyle: "solid",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
    },
    canncelOrderText: {
        fontSize: 12,
        color: "#2A2B30"
    },
    OrderbtnTwo: {
        width: 72,
        height: 24,
        borderRadius: 12,
        backgroundColor: "#EC6138",
        borderStyle: "solid",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        marginLeft: 12,
    },
    OrderbtnTwoText: {
        color: "#fff",
        fontSize: 12,
    },
})

export default OrderListComponent;


